Quiero agregar el elemento "<li>" al elemento del cuadro al hacer clic en el "botón interno", sin necesidad de identificar ningún elemento para poder agregar tantos cuadros como necesite, pero ¿cómo?
export default class App extends Component { render() { return <> Home <BoxA/> <BoxB/> <InnerButton name='Enter'/> </> } } function InnerButton(arr) { function addItemToList(newItem) { // what to do } console.log(arr) return <input type={'button'} value={arr.name} } onClick={() => addItemToList('item 2')} /> } function BoxA() { return <div id='boxA' > <ul> <li> None. </li> </ul> </div> } function BoxB() { return <div > <ul> <li> None. </li> </ul> </div> }Intenté agregar useState, pero no puedo usarlo fuera del componente, ¿puedo hacerlo sin usar estados?
almacene una matriz de elementos que desea enumerar en el estado en el nivel superior (aplicación), y pase una función de inserción a InnerButton como accesorio, y pase la matriz a los elementos Box.
En el mapa de elementos de Box a través de los accesorios de matriz y represente un <li></li> para cada elemento